<template>
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="state.radioValue" :label="1">
        周，允许的通配符[, - * ? / L #]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="2"> 不指定 </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="3">
        周期从星期
        <el-select clearable v-model="state.cycle01">
          <el-option
            v-for="(item, index) of state.weekList"
            :key="index"
            :label="item.value"
            :value="item.key"
            :disabled="item.key === 1"
            >{{ item.value }}</el-option
          >
        </el-select>
        -
        <el-select clearable v-model="state.cycle02">
          <el-option
            v-for="(item, index) of state.weekList"
            :key="index"
            :label="item.value"
            :value="item.key"
            :disabled="item.key < state.cycle01 && item.key !== 1"
            >{{ item.value }}</el-option
          >
        </el-select>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="4">
        第
        <el-input-number v-model="state.average01" :min="1" :max="4" /> 周的星期
        <el-select clearable v-model="state.average02">
          <el-option
            v-for="(item, index) of state.weekList"
            :key="index"
            :label="item.value"
            :value="item.key"
            >{{ item.value }}</el-option
          >
        </el-select>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="5">
        本月最后一个星期
        <el-select clearable v-model="state.weekday">
          <el-option
            v-for="(item, index) of state.weekList"
            :key="index"
            :label="item.value"
            :value="item.key"
            >{{ item.value }}</el-option
          >
        </el-select>
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="6">
        指定
        <el-select
          clearable
          v-model="state.checkboxList"
          placeholder="可多选"
          multiple
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) of state.weekList"
            :key="index"
            :label="item.value"
            :value="String(item.key)"
            >{{ item.value }}</el-option
          >
        </el-select>
      </el-radio>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, watch, computed } from "vue";

const emit = defineEmits(["update"]);
const state: any = reactive({
  radioValue: 2,
  weekday: 2,
  cycle01: 2,
  cycle02: 3,
  average01: 1,
  average02: 2,
  checkboxList: [],
  weekList: [
    {
      key: 2,
      value: "星期一",
    },
    {
      key: 3,
      value: "星期二",
    },
    {
      key: 4,
      value: "星期三",
    },
    {
      key: 5,
      value: "星期四",
    },
    {
      key: 6,
      value: "星期五",
    },
    {
      key: 7,
      value: "星期六",
    },
    {
      key: 1,
      value: "星期日",
    },
  ],
  checkNum: null,
});
defineExpose({
  cycle01: state.cycle01,
  cycle02: state.cycle02,
  average01: state.average01,
  average02: state.average02,
  weekday: state.weekday,
  checkboxList: state.checkboxList,
});
const props: any = defineProps({
   check: {
    type: Function,
    required: true,
    default: () => {},
  },
  cron: {
    type: String,
    required: true,
  },
});
watch(
  ()=>props.check,
  (val) => {
    if(val){
 state.checkNum = val;
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
// 计算两个周期值
const cycleTotal = computed(() => {
  state.cycle01 = state.checkNum(state.cycle01, 1, 7);
  state.cycle02 = state.checkNum(state.cycle02, 1, 7);
  return state.cycle01 + "-" + state.cycle02;
});
// 计算平均用到的值
const averageTotal = computed(() => {
  state.average01 = state.checkNum(state.average01, 1, 4);
  state.average02 = state.checkNum(state.average02, 1, 7);
  return state.average02 + "#" + state.average01;
});
// 最近的工作日（格式）
const weekdayCheck = computed(() => {
  const workday = state.checkNum(state.workday, 1, 7);
  return workday;
});
const checkboxString = computed(() => {
  let str = state.checkboxList.join();
  return str == "" ? "*" : str;
});
// 单选按钮值变化时
const radioChange = () => {
  if (state.radioValue !== 2 && state.cron.week !== "?") {
    emit("update", "day", "?", "week");
  }

  switch (state.radioValue) {
    case 1:
      emit("update", "week", "*");
      break;
    case 2:
      emit("update", "week", "?");
      break;
    case 3:
      emit("update", "week", cycleTotal.value);
      break;
    case 4:
      emit("update", "week", averageTotal.value);
      break;
    case 5:
      emit("update", "week", weekdayCheck.value + "L");
      break;
    case 6:
      emit("update", "week", checkboxString.value);
      break;
  }
};
// 周期两个值变化时
const cycleChange = () => {
  if (state.radioValue == "3") {
    emit("update", "week", cycleTotal.value);
  }
};
// 平均两个值变化时
const averageChange = () => {
  if (state.radioValue == "4") {
    emit("update", "week", averageTotal.value);
  }
};
// 最近工作日值变化时
const workdayChange = () => {
  if (state.radioValue == "5") {
    emit("update", "week", weekdayCheck.value + "l");
  }
};
// checkbox值变化时
const checkboxChange = () => {
  if (state.radioValue == "6") {
    emit("update", "week", checkboxString.value);
  }
};
 
 
watch(()=>state.workdayCheck, (val) => {
  workdayChange();
});
 

watch(()=>state.radioValue, (val) => {
  radioChange();
},{
  deep: true
});
watch(()=>state.cycleTotal, (val) => {
  cycleChange();
});
watch(()=>state.averageTotal, (val) => {
  averageChange();
});
watch(()=>state.checkboxString, (val) => {
  checkboxChange();
});
</script>
